.editor-page {
    .fill-view {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
    }

    .help-move {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
        cursor: move;
    }

    .btn-list {
        position: absolute;
        z-index: 3;
        background-color: white;
        padding: 2px;
        border-radius: 5px;

        &>span {
            font-size: 0;
            display: inline-block;
            width: 30px;
            height: 30px;
            background-size: 80% auto;
            background-position: center center;
            background-repeat: no-repeat;
            border-radius: 50%;
            vertical-align: top;
            cursor: pointer;

            &.config {
                background-image: url('../image/config.png');
            }

            &.delete {
                background-image: url('../image/delete.png');
            }

            &.close {
                background-image: url('../image/close.png');
            }
        }
    }

    .fixed-btn {
        position: fixed;
        z-index: 4;
        top: 20px;
        height: 30px;
        background-size: auto 70%;
        background-position: center;
        background-repeat: no-repeat;
        font-size: 0;
        cursor: pointer;

        &.add-btn {
            right: 60px;
            width: 30px;
            background-image: url('../image/add.png');
        }

        &.config-btn {
            right: 90px;
            width: 50px;
            background-image: url('../image/setting.png');
        }
    }

    &>div {
        &>div {
            &.container {
                position: relative;
                overflow: hidden;
                height: 100vh;

                &>div {
                    position: relative;
                    z-index: 1;
                    height: 100%;
                    width: 100%;
                    background-size: cover !important;
                    background-position: center center !important;

                    &>div {
                        &.active {
                            background-color: #ffffff55;
                            z-index: 1;

                            &>.resize {
                                display: inline-block;
                                width: 30px;
                                height: 30px;
                                background-color: white;
                                position: absolute;
                                z-index: 5;
                                right: 0;
                                bottom: 0;
                                background-image: url('../image/resize.png');
                                background-position: center;
                                background-size: 90% auto;
                                background-repeat: no-repeat;
                            }
                        }
                    }
                }

                &:after {
                    --lineStart: 4%;
                    --lineEnd: 96%;
                    --bgStart: 25%;
                    --bgEnd: 75%;
                    --color: #ddd;
                    content: '';
                    position: absolute;
                    transform-origin: 50% 50%;
                    width: 100%;
                    height: 100%;
                    transform: rotate(45deg) scale(100);
                    background-size: .15px .15px;
                    background-image: linear-gradient(0deg, var(--color) var(--lineStart), transparent var(--lineStart), transparent var(--lineEnd), var(--color) var(--lineEnd)), linear-gradient(-90deg, var(--color) var(--lineStart), transparent var(--lineStart), transparent var(--lineEnd), var(--color) var(--lineEnd)), linear-gradient(45deg, var(--color) var(--bgStart), transparent var(--bgStart), transparent var(--bgEnd), var(--color) var(--bgEnd)), linear-gradient(-45deg, var(--color) var(--bgStart), transparent var(--bgStart), transparent var(--bgEnd), var(--color) var(--bgEnd));
                }
            }

            &.config {
                width: 300px;
                overflow: auto;
                position: fixed;
                top: 50px;
                z-index: 1;
                background-color: white;
                max-height: calc(100vh - 100px);
                min-height: 200px;
                box-shadow: 0 0 13px 0 #607d8b;
                border-radius: 5px;
                right: 50px;

                &>h2 {
                    background-color: #b1c3c1;
                    background-size: auto 80%;
                    background-position: 10px center;
                    background-repeat: no-repeat;
                    padding-left: 42px;
                    font-size: 16px;
                    line-height: 30px;
                    user-select: none;
                    cursor: move;
                    background-image: url('../image/logo.png');

                    &>span {
                        float: right;
                        width: 30px;
                        text-align: center;
                        font-family: monospace;
                        cursor: pointer;
                        font-weight: 200;

                        &:hover {
                            background-color: red;
                            color: white;
                        }
                    }
                }
            }
        }
    }
}
